<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">	
		<meta name="keywords" content="财经武林,财经智库">		
		<title>视频详情页面</title>
		<link rel="stylesheet" href="css/lqbase.css" />
		<link rel="stylesheet" href="css/lqpublic.css" />
		<!--音频播放器-->
    	<link rel="stylesheet" href="audio/css/audio_player.css">		
	</head>
	<body>
	

		<!-- 中间内容部分 -->
		<div class="centerwrapper2">
			
			<!-- 课程图片 -->
			<div class="coursediv">
				<!-- <img src="image/pic07.png"> -->
				 <video class="coursepic" id="video2" src="http://www.runoob.com/try/demo_source/movie.mp4">
                    Your browser does not support HTML5 video.
                </video>
				
				<!-- 返回按钮 -->
				<a class="topback" onClick="javascript :history.back(-1);"><i class="icoback"></i>返回</a>
						
			</div>

			<!-- 音频播放 -->
			    <div class="bg_white mb_20 pb_20 pad30">
        <div class="box_radio">
            <div class="book_title">
                <div class="audio_title">[试看] 为什么你需要幽默感</div>
            </div>
            <div class="audio_box">
				<div class="music-nav">
                    <!--当前时间-->
                    <div class="time" id="time_cur">00:00</div>
                    <!--进度条-->
                    <div class="audio_progress">
                        <span class="audio_line"></span>
                        <span class="audio_blue"></span>
                        <span class="audio_dot"></span>
                        <input type="range" min="0" max="0" step="0.4" value="0" id="scale" >
                    </div>
                    <!--歌曲时长-->
                    <div class="time" id="time_long">00:00</div>
                </div>

                <!--音乐控制面板-->
                <div class="audio_btn">
                    <!--快退-->
                    <img class="btn_fr" src="audio/img/btn_fr.png" alt="">
                    <!--旋转碟片-->
                    <div class="cover" id="play"></div>
                    <!--暂停/播放按钮-->
                    <div class="btn_play btn_pause"></div>
                    <!--快进-->
                    <img class="btn_ff" src="audio/img/btn_ff.png" alt="">
                </div>
                
               
            </div>
        </div>
    </div>

		

		</div>

		<!-- 弹层 -->
		<div class="zhezhaoc" id="zhezhaoc2"></div>
		<div class="zhezhao" id="zhezhao2">
			<h4 class="paix">倍速</h4>
			<div class="sclist">
				<div class="scli">
					<label><input type="radio" name="paixu" value="1.0" checked>1.0<i></i></label>
				</div>
				<div class="scli">
					<label><input type="radio" value="1.5" name="paixu">1.5<i></i></label>
				</div>
				<div class="scli">
					<label><input type="radio" value="2.0" name="paixu">2.0<i></i></label>
				</div>
			</div>
			<a class="scbtn" id="beisubtn">确定</a>
		</div>

<!-- 底部导航 -->
		<div id="footernav">
			<a class="musicfoot" href="manuscript.html">
				<i class="boimg1"></i>
				<span class="red">文稿</span>
			</a>
			<a class="musicfoot" href="#">
				<i class="boimg2"></i>
				<span>0</span>
			</a>
			<a class="musicfoot" id="beisu">
				<i class="boimg3"></i>
				<span>倍速<sapn>
			</a>
			<a class="musicfoot" href="#">
				<i class="boimg4"></i>
				<span>分享</span>
			</a>
		</div>
		

		<script src="js/common.js"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/lqplayvideo.js"></script>
	    <script type="text/javascript">
		window.onload=function(){
			var allheight = document.body.scrollHeight+"px";//获取屏幕高度,遮罩层需要
				$(".musicfoot").click(function(){
					// $(this).addClass('oncli').siblings('a').removeClass('oncli');
					if ($(this).hasClass('oncli')) {
						$(this).removeClass('oncli');
					}else{
						$(this).addClass('oncli')
					}
				});		
				// 音频倍速播放
				$("#beisu").click(function(){
						$("#zhezhaoc2").css("display","flex");
						$("#zhezhaoc2").css("height",allheight);
						$("#zhezhao2").css("display","flex");
					});		

				
				 var x = document.getElementById("video2");
				// 向 audio 元素中添加 onratechange 事件，如果播放速度改变执行函数
				x.addEventListener("ratechange", myFunction);
				function myFunction() {
				    console.log('倍速='+ x.playbackRate);
				};

				$("#beisubtn").click(function(){
					$("#zhezhaoc2").css("display","none");
					$("#zhezhao2").css("display","none");
					var paixued = parseFloat($('input[name="paixu"]:checked').val());
					x.playbackRate = paixued;
					console.log(typeof paixued);
					console.log('倍速='+ paixued);
					console.log('音乐='+$("#video2").playbackRate);
					});
				}
			
		</script>
	    <script>
	        	//获取传过来的id
		function getParam(paramName) {  
		    paramValue = "", isFound = !1;  
		    if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {  
		        arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;  
		        while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++  
		    }  
		    return paramValue == "" && (paramValue = null), paramValue  
		} 
		var yid = getParam("id");//获取传过来的参数

		//音频详情
		  $.ajax({
		  	headers: {'token' : userid },
			type: "get",
			url: url+"article/viewInfo",
			data:{
			  	"articleSid": yid //文章sid
			  },
		   success: function(data){
		  	var wenzhtml = data.data.article;//文章详情
		  	var bigimg = wenzhtml.backgroundImage; //文章大图
		  	$('.audio_title').text(wenzhtml.title);
		  	$('#video2').attr('src',wenzhtml.video);
		    
		}
		});
	    </script>
	</body>	
</html>
